<!-- 需求列表模块 -->
<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <!-- 头部搜索框 -->
      <el-form :inline="true" :model="searchDemandForm" @keyup.enter.native="getDemandList()">
        <el-form-item>
          <el-input v-model="searchDemandForm.id" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchDemandForm.name" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchDemandForm.author" placeholder="TODO" title="TODO" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDemandList()">查询</el-button>
          <el-button type="primary" @click="createDemandHandle()">添加</el-button>
          <el-button type="danger" :disabled="demandListSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
      </el-form>
      <!-- table展示页 -->
      <el-table v-loading="demandListLoading" :data="demandList" border style="width: 100%;" @selection-change="selectionChangeHandle">
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="id" header-align="center" align="center" label="需求ID" sortable />
        <el-table-column prop="name" header-align="center" align="center" label="需求名称" sortable width="200" />
        <el-table-column prop="personInCharge" header-align="center" align="center" label="负责人" sortable />
        <el-table-column prop="member" header-align="center" align="center" label="成员" sortable />
        <el-table-column header-align="center" align="center" label="状态" sortabl>
          <template slot-scope="scope">
            <el-tag v-show="scope.row.status == 0" type="info">待测试</el-tag>
            <el-tag v-show="scope.row.status == 1">测试中</el-tag>
            <el-tag v-show="scope.row.status == 2" type="warning">挂起</el-tag>
            <el-tag v-show="scope.row.status == 3" type="success">测试通过</el-tag>
            <el-tag v-show="scope.row.status == 4" type="danger">测试失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" header-align="center" align="center" label="备注信息" sortable />
        <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getCaseList(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="todo(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteDemandT(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能区 -->
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
      <create-demand v-if="createDemandVisible" ref="createDemand" @refreshDataList="getDemandList" />
    </div>
  </div>
</template>

<script>
import { searchAll, deleteDemand } from '@/api/auto/demand.js'
import CreateDemand from './case-demand-create'
export default {
  name: 'AutoCaseDemand',
  components: {
    CreateDemand
  },
  data() {
    return {
      demandListSelections: [],
      searchDemandForm: {},
      demandList: [],
      demandListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      createDemandVisible: false
    }
  },
  created() {
    this.getDemandList()
  },
  methods: {
    getDemandList() {
      this.demandListLoading = true
      searchAll(this.$route.params.productId, this.pageIndex, this.pageSize).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.demandList = data.content
        } else {
          this.$message.error(respnose.message)
        }
        this.demandListLoading = false
      })
    },
    // 查看用例列表
    getCaseList(row) {
      // 这里不要删除缓存了
      // this.$store.dispatch('tagsView/delView', { name: 'AutoCaseList', path: '/auto/auto-case-list' })
      this.$nextTick(() => {
        this.$router.push({
          name: 'AutoDemandCaseList',
          params: {
            demandId: row.id
          }
        })
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.demandListSelections = val
    },
    // 每页数变化
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDemandList()
    },
    // 当前页变化
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDemandList()
    },
    // 批量删除方法 TODO
    deleteHandle(id) {
      var ids = id ? [id] : this.demandListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message('todo')
      }).catch(() => {})
    },
    createDemandHandle() {
      this.createDemandVisible = true
      this.$nextTick(() => {
        this.$refs.createDemand.init(this.$route.params.productId)
      })
    },
    deleteDemandT(row) {
      this.$confirm('此操作将永久删除该需求信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDemand(row.id).then(respnose => {
          if (respnose && respnose.code === 200) {
            this.$message.success(respnose.message)
            this.getDemandList()
          } else {
            this.$message.error(respnose.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
